import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';


class Renderer {
    static getWebGLRenderer(viewport) {
        // console.log('Renderer.getWebGLRenderer: ', ...arguments);
        let { el, width, height, ratio } = viewport;
        let param = {
            alpha: true,
            antialias: true,
            // logarithmicDepthBuffer: true,
            precision: 'lowp',
            preserveDrawingBuffer: true,
            autoClear: true
        };
        let renderer = new THREE.WebGLRenderer(param);
        // if (!renderer) setTimeout(window.location.reload, 0);
        renderer.setPixelRatio(ratio);
        renderer.setSize(width, height);
        el.appendChild(renderer.domElement);
        renderer.setClearColor(0xeeeeee, 1.0);
        // renderer.sortObjects = false;
        renderer.autoClear = false; // for multi scene ...
        // for shadow
        renderer.shadowMap.enabled = true;
        // renderer.shadowMap.type = THREE.PCFSoftShadowMap; //阴影类型
        // renderer.gammaInput = true;
        // renderer.gammaOutput = true;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.toneMappingExposure = 0.5;
        // renderer.shadowMapEnabled = true;
        return renderer;
    }

    static getCSS2DRenderer(viewport) {
        let { el, width, height, ratio } = viewport;
        let labelRenderer = new CSS2DRenderer();
        labelRenderer.setSize(width, height);
        // labelRenderer.setPixelRatio(ratio);
        labelRenderer.domElement.style.position = 'absolute';
        labelRenderer.domElement.style.top = '0px';
        el.appendChild(labelRenderer.domElement);
        return labelRenderer;
    }
}

export default Renderer;
